<script setup>
import router from "@/router";
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";

let id = ref();
const patient = ref({});
const userToken = ref(localStorage.getItem('user-token')?
    JSON.parse(localStorage.getItem('user-token')):null);

onMounted(()=>{
  if (userToken.value == null) {
    ElMessage.error("请先登录!");
    router.push('/patient/login');
    return;
  }
  axios.defaults.headers.common['Authorization']=userToken.value;
  if (location.search.includes('id')) {
    id = new URLSearchParams(location.search).get('id');
    axios.get(BASE_URL + '/v1/patients/' + id + '/select').then((response) => {
      if (response.data.code === 20000) {
        patient.value = response.data.data;
      }
    })
  }
})
const selectIndex = ref(1);
const changeSelect = (index) => {
  switch (index){
    case '1' :
      selectIndex.value = 0;
      router.push("/admin/formPatient/basic?id="+id);
      break;
    case '2':
      selectIndex.value = 1;
      router.push('/admin/formPatient/situation?id='+id);
      break;
  }
}
const newAppointment = ()=>{
  router.push('/newAppointment?uId='+id);
}

</script>

<template>
  <el-card style="width: 1645px;height: 900px ;">
  <el-row>
    <el-col :span="18" style="text-align: left;">
      <el-row :gutter="10" style="height: 100%">
        <el-col :span="1">
          <div style="width: 5px;height: 100%;background-color: #22ccee;float: right"></div>
        </el-col>
        <el-col :span="23">
          <p style="font-weight: bold;float: left">{{ patient.nickname }}</p>
        </el-col>
      </el-row>
    </el-col>
    <el-col :span="6">
      <el-row>
        <el-col :span="18">
          <div v-if="selectIndex===1">
            <el-button class="colButton" style="margin-left: 44px;">编辑</el-button>
            <el-button class="colButton">复诊</el-button>
            <el-button @click="newAppointment()"
                       class="colButton" style="color: white;background-color: #409EFF">
              新增预约
            </el-button>
          </div>
        </el-col>
        <el-col :span="6">
          <el-button @click="router.push('/admin/patient')" class="colButton" style="margin-right: 38px">返回</el-button>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
    <el-menu mode="horizontal" @select="changeSelect"
             style="font-weight: bold;height: 45px;margin: 0 0 20px 40px">
      <el-menu-item index="1" style="font-size: 18px" :class="{'active-btn': $route.path==='/admin/formPatient/basic'}">基本信息</el-menu-item>
      <el-menu-item index="2" style="font-size: 18px" :class="{'active-btn': $route.path==='/admin/formPatient/situation'}">就诊情况</el-menu-item>
    </el-menu>
    <router-view/>
  </el-card>

</template>

<style>
.active-btn{
  border-bottom: 2px solid #409EFF !important;
  color: #409EFF !important;
}
.colButton{
  color: #409EFF;
  background-color: white;
  border: 1px solid #409EFF;
}
</style>
